<template>
  <!-- 登录面板 -->
  <div class="github">
    <a
      class="btn btn-link"
      href="https://github.com/matteobruni/tsparticles"
      title="Find more info on GitHub"
    >
      <img
        class="img-fluid"
        id="gh-mark"
        src="https://particles.js.org/images/GitHub-Mark-120px-plus.png"
        alt=""
      />
      <span id="gh-project">tsParticles</span>
    </a>
    <div>
      <a
        class="github-button"
        href="https://github.com/matteobruni/tsparticles"
        data-icon="octicon-star"
        aria-label="Star matteobruni/tsparticles on GitHub"
        >Star</a
      >
      <a
        class="github-button"
        href="https://github.com/matteobruni/tsparticles/fork"
        data-icon="octicon-repo-forked"
        aria-label="Fork matteobruni/tsparticles on GitHub"
        >Fork</a
      >
    </div>
  </div>
  <!-- <a-button>aaa</a-button> -->
  <div class="loginModel">
    <div class="logo">
      <img src="../../assets/logo.png" alt="" />
    </div>
    <a-form
      :model="formState"
      name="basic"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        name="username"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.username" />
      </a-form-item>

      <a-form-item
        name="password"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-input-password v-model:value="formState.password" />
      </a-form-item>

      <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
        <a-checkbox v-model:checked="formState.remember"
          >Remember me</a-checkbox
        >
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" html-type="submit">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup>
import { tsParticles } from "https://cdn.jsdelivr.net/npm/@tsparticles/engine@3.1.0/+esm";
import { loadAll } from "https://cdn.jsdelivr.net/npm/@tsparticles/all@3.1.0/+esm";

async function loadParticles(options) {
  await loadAll(tsParticles);

  await tsParticles.load({ id: "tsparticles", options });
}

const configs = {
  particles: {
    destroy: {
      mode: "split",
      split: {
        count: 1,
        factor: {
          value: {
            min: 2,
            max: 4,
          },
        },
        rate: {
          value: 100,
        },
        particles: {
          life: {
            count: 1,
            duration: {
              value: {
                min: 2,
                max: 3,
              },
            },
          },
          move: {
            speed: {
              min: 10,
              max: 15,
            },
          },
        },
      },
    },
    number: {
      value: 80,
    },
    color: {
      value: [
        "#3998D0",
        "#2EB6AF",
        "#A9BD33",
        "#FEC73B",
        "#F89930",
        "#F45623",
        "#D62E32",
        "#EB586E",
        "#9952CF",
      ],
    },
    shape: {
      type: "circle",
    },
    opacity: {
      value: 1,
    },
    size: {
      value: {
        min: 10,
        max: 15,
      },
    },
    collisions: {
      enable: true,
      mode: "bounce",
    },
    move: {
      enable: true,
      speed: 3,
      outModes: "bounce",
    },
  },
  interactivity: {
    events: {
      onClick: {
        enable: true,
        mode: "pop",
      },
    },
  },
  background: {
    color: "#000000",
  },
};

loadParticles(configs);
import { useRouter } from "vue-router";
import { reactive } from "vue";
//粒子背景的配置
import Particlesoptions from "../../config/particles";
const router = useRouter();
console.log(Particlesoptions);
const formState = reactive({
  username: "",
  password: "",
  remember: true,
});
const onFinish = (values) => {
  console.log("Success:", values);
  // 跳转 - 首页
  //   window.location = "#/home";原生js
  router.push("/home");
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
</script>
<style lang="less">
/* less css预处理器 */
#refresh-config {
  bottom: 5px;
  left: 5px;
  position: fixed;
  z-index: 1000;
}

/* ---- reset ---- */
// .github {
//   z-index: 10000;
//   bottom: 10px;
//   right: 10px;
//   position: fixed;
//   border-radius: 10px;
//   background: #fff;
//   padding: 0 12px 6px 12px;
//   border: 1px solid #000;
// }

.github a:hover,
.github a:link,
.github a:visited,
.github a:active {
  color: #000;
  text-decoration: none;
}

.github img {
  height: 30px;
}

.github #gh-project {
  font-size: 20px;
  padding-left: 5px;
  font-weight: bold;
  vertical-align: bottom;
}
.loginModel {
  width: 450px;
  background-color: rgba(215, 217, 224, 0.35);
  position: fixed;
  left: 50%;
  top: 50%;
  padding: 20px;
  transform: translate(-50%, -50%);
  z-index: 5000;
  box-sizing: border-box;
  .logo {
    display: flex;
    justify-content: center;
    img {
      width: 120px;
    }
  }
}
</style>
